<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="documentation">
        <meta name="product" content="kendo-ui">
        
        <title>Common Issues | AngularJS Directives</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Learn about the solutions of issues that may occur while working with Kendo UI controls in AngularJS.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("AngularJS/Troubleshooting/common-issues.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//AngularJS/Troubleshooting/common-issues.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    

    <div id="page-article">
        <article>
            
             <h1 id="common-issues"><a href="#common-issues">Common Issues</a></h1>

<p>This page provides solutions to common issues you might encounter while handling Kendo UI widgets in AngularJS.</p>

<h2 id="performance"><a href="#performance">Performance</a></h2>

<h3 id="widgets-are-not-initialized"><a href="#widgets-are-not-initialized">Widgets Are Not Initialized</a></h3>

<p>The Kendo UI controls are designed to evaluate all <code>tag</code> attributes—even HTML attributes—which match their specific options. Each widget has a specific list of options that is used. If a defined attribute cannot be found in the <code>$scope</code>, the widget puts its initialization on hold and the widget itself is not initialized.</p>

<p>For example, a DatePicker with an empty <code>value</code> attribute will not initialize.</p>

<h6>Example</h6>

<pre data-lang="html"><code>    &lt;div ng-app="app" ng-controller="MyCtrl"&gt;
        &lt;input kendo-date-picker value="" /&gt;
    &lt;/div&gt;
    &lt;script&gt;
    angular.module("app", ["kendo.directives"]).controller("MyCtrl", function($scope) {
    });
</code></pre>

<p>In the previous example, the widget checks the <code>tag</code> element attributes and finds a <code>value</code> attribute, because it has a <a href="/api/javascript/ui/datepicker#configuration-value"><code>value</code></a> option. The evaluation against the <code>$scope</code> returns <code>undefined</code> and the widget does not initialize.</p>

<p><strong>Solution</strong></p>

<p>The described behavior is part of the core initialization logic of the Kendo UI directives. To handle this issue, avoid the rendering of empty attributes which match the options of the widget.</p>

<blockquote>
<p><strong>Important</strong></p>

<p>The issue is observable as of the Kendo UI Q2 2015 release where widgets are initialized synchronously abiding by the priority of the Angular JS directives.</p>
</blockquote>

<h3 id="angularjs-templates-are-not-evaluated-before-widget-initialization"><a href="#angularjs-templates-are-not-evaluated-before-widget-initialization">AngularJS Templates Are Not Evaluated before Widget Initialization</a></h3>

<p>This is a commonly occurring scenario when you want to decorate the initial HTML element by using AngularJS templates. However, as of the Kendo UI Q2 2015 release widgets are initialized synchronously. This results in a template value that is not evaluated during the initialization of the widget. Such behavior is expected and has so far worked by chance.</p>

<p><strong>Solution</strong></p>

<p>To handle such unevaluated templates, use a custom AngularJS directive with higher priority. As a result, AngularJS evaluates it before the Kendo UI directives and the HTML element is properly decorated and rendered.</p>

<p>Fore more details, refer to the <a href="https://docs.angularjs.org/api/ng/service/%24compile">article on the priorities of AngularJS directives</a>.</p>

<h3 id="widgets-with-ng-model-directives-reflect-no-model-value"><a href="#widgets-with-ng-model-directives-reflect-no-model-value">Widgets with ng-model Directives Reflect No Model Value</a></h3>

<p>As of the Angular 1.4.9 release, widgets that are initialized from the <code>select</code> element do not reflect changes to the model field. This is due to a change in the Angular implementation related to the <code>ngModel.$render</code> method. In the new Angular versions, this method is overridden in favor of a custom Angular implementation which supports the addition of custom <code>option</code> elements. However, this enhancement breaks the Kendo UI <code>ngModel</code> support, because it also depends on the <code>ngModel.$render</code> method to reflect the changes which are made in the model. Basically, the Kendo UI <a href="https://github.com/telerik/kendo-ui-core/blob/master/src/kendo.angular.js#L388"><code>ngModel.$render</code></a> method is directly overridden by the new Angular function.</p>

<p><strong>Solution</strong></p>

<p>The available workarounds are:</p>

<ol>
<li>Use the <code>k-ng-model</code> directive instead. For more information, refer to the <a href="/AngularJS/introduction#scope-bindings">corresponding documentation</a>.</li>
<li>Use the <code>k-ng-delay</code> attribute that is mapped to the <code>ng-model</code> model field. The aim is to postpone <code>ngModel.$render</code> that is set on Kendo UI side and, as a result, to enable it to take precedence over the Angular <code>ngModel.$render</code> custom method.</li>
</ol>

<p>The following example demonstrates how to use the <code>ng-model</code> directive.</p>

<h6>Example</h6>

<pre><code>&lt;div id="example" ng-app="KendoDemos"&gt;
    &lt;div class="demo-section k-content" ng-controller="MyCtrl"&gt;

    &lt;h4 style="padding-top: 2em;"&gt;Remote data&lt;/h4&gt;
    &lt;select kendo-drop-down-list
            k-data-text-field="'ProductName'"
            k-data-value-field="'ProductID'"
            k-data-source="productsDataSource"
            ng-model="selectedProductId"
            k-ng-delay="selectedProductId"
            style="width: 100%"&gt;&lt;/select&gt;

      &lt;h4 style="padding-top: 2em;"&gt;Selected Product Id&lt;/h4&gt;
      &lt;em&gt;&lt;/em&gt;

&lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
  angular.module("KendoDemos", [ "kendo.directives" ])
      .controller("MyCtrl", function($scope, $timeout){
          $scope.productsDataSource = {
            type: "odata",
            serverFiltering: true,
            transport: {
                read: {
                    url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
                }
            }
        };

    $scope.selectedProductId = null;

    //simulate delay to fetch selectedID
    $timeout(function(){
      $scope.selectedProductId = 2;
    },2000);

  })
&lt;/script&gt;
</code></pre>

<h3 id="multiselect-throws-exception"><a href="#multiselect-throws-exception">MultiSelect Throws Exception</a></h3>

<p>The Kendo UI MultiSelect widget sometimes throws an exception which states that it <code>cannot get length from undefined</code> or similar. One of the most frequent reasons for this issue is that the field set to the <code>k-ng-model</code> directive is <code>undefined</code>.</p>

<p>The following example demonstrates an incorrect definition of the <code>k-ng-model</code> field.</p>

<h6>Example</h6>

<pre><code>&lt;div id="example" ng-app="KendoDemos"&gt;
    &lt;div class="demo-section k-content" ng-controller="MyCtrl"&gt;
        &lt;h4&gt;Select product&lt;/h4&gt;
        &lt;select kendo-multi-select k-options="selectOptions" k-ng-model="selectedIds"&gt;&lt;/select&gt;
        &lt;p ng-show="selectedIds.length" style="padding-top: 1em;"&gt;Selected: &lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
  angular.module("KendoDemos", [ "kendo.directives" ])
    .controller("MyCtrl", function($scope){
        $scope.selectOptions = {
            placeholder: "Select products...",
            dataTextField: "ProductName",
            dataValueField: "ProductID",
            valuePrimitive: true,
            autoBind: false,
            dataSource: {
                type: "odata",
                serverFiltering: true,
                transport: {
                    read: {
                        url: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
                    }
                }
            }
        };

        //$scope.selectedIds is undefined
      })
&lt;/script&gt;
</code></pre>

<p><strong>Solution</strong></p>

<p>Define the <code>k-ng-model</code> field to an empty array.</p>

<p>The following example demonstrates the correct definition of the <code>k-ng-model</code> field.</p>

<h6>Example</h6>

<pre><code>&lt;div id="example" ng-app="KendoDemos"&gt;
    &lt;div class="demo-section k-content" ng-controller="MyCtrl"&gt;
        &lt;h4&gt;Select product&lt;/h4&gt;
        &lt;select kendo-multi-select k-options="selectOptions" k-ng-model="selectedIds"&gt;&lt;/select&gt;
        &lt;p ng-show="selectedIds.length" style="padding-top: 1em;"&gt;Selected: &lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
  angular.module("KendoDemos", [ "kendo.directives" ])
    .controller("MyCtrl", function($scope){
        $scope.selectOptions = {
            placeholder: "Select products...",
            dataTextField: "ProductName",
            dataValueField: "ProductID",
            valuePrimitive: true,
            autoBind: false,
            dataSource: {
                type: "odata",
                serverFiltering: true,
                transport: {
                    read: {
                        url: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
                    }
                }
            }
        };

        $scope.selectedIds = [];
      })
&lt;/script&gt;
</code></pre>

<h3 id="widget-loses-its-value"><a href="#widget-loses-its-value">Widget Loses Its Value</a></h3>

<p>When the <code>ng-model</code> and <code>k-ng-model</code> directives are applied together, it is possible for the widget to lose its value. The reason is that both directives update the element value simultaneously and this results in conflicting behavior.</p>

<p><strong>Solution</strong></p>

<p>Use only one of the two directives—either <code>k-ng-model</code> or <code>ng-model</code>.</p>

<h2 id="see-also"><a href="#see-also">See Also</a></h2>

<ul>
<li><a href="/AngularJS/introduction">AngularJS Integration Overview</a></li>
<li><a href="/AngularJS/global-events">Global Events</a></li>
<li><a href="/AngularJS/the-grid-widget">Grid Settings</a></li>
<li><a href="/AngularJS/data-source">Directives with DataSource</a></li>
<li><a href="/AngularJS/Troubleshooting/notes-on-ng-repeat">ng-* Directives in Widget Markup</a></li>
<li><a href="/AngularJS/Troubleshooting/leak">Memory Leaks</a></li>
<li><a href="/AngularJS/how-to/window-service">How to Load View in Window</a></li>
<li><a href="/AngularJS/how-to/nesting-widgets">How to Nest Widgets</a></li>
</ul> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

